<template>
  <div>
    <!-- {{ goods }} -->
    <div class="form">
      <el-form ref="form"
              :disabled="seeFlag"
               :model="good"
               inline
               label-width="150px"
               size="small"
               label-suffix="："
               :rules="rules">
        <div class="box-title">货信息</div>
        <el-form-item label="提单号"
                      prop="planGoods.billno">
          <el-input v-model="good.planGoods.billno"
                    placeholder="请输入"
                    clearable
                    style="width:150px"></el-input>
        </el-form-item>
        <el-form-item label="订舱号"
                      prop="planGoods.vesselBookingNo">
          <el-input v-model="good.planGoods.vesselBookingNo"
                    placeholder="请输入"
                    clearable
                    style="width:150px"></el-input>
        </el-form-item>
        <el-form-item label="货主"
                      prop="planGoods.consignee">
          <el-select v-model="good.planGoods.consignee"
                     placeholder="请选择"
                     clearable
                     filterable
                     style="width:150px">
            <el-option v-for="item in dataList.hz"
                       :key="item.id"
                       :label="item.customerCode+'/'+item.name"
                       :value="item.customerCode"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="货名"
                      prop="planGoods.gname">
          <el-input v-model="good.planGoods.gname"
                    placeholder="请输入"
                    clearable
                    style="width:150px"></el-input>
        </el-form-item>
        <el-form-item label="发货人"
                      prop="planGoods.shipper">
          <el-input v-model="good.planGoods.shipper"
                    placeholder="请输入"
                    clearable
                    style="width:150px"></el-input>
        </el-form-item>
        <el-form-item label="收货人"
                      prop="planGoods.receiver">
          <el-input v-model="good.planGoods.receiver"
                    placeholder="请输入"
                    clearable
                    style="width:150px"></el-input>
        </el-form-item>
        <el-form-item label="货代"
                      prop="planGoods.gagent">
            <el-select v-model="good.planGoods.gagent"
                     placeholder="请选择"
                     clearable
                     filterable
                     style="width:150px">
            <el-option v-for="item in dataList.hd"
                       :key="item.id"
                       :label="item.customerCode+'/'+item.name"
                       :value="item.customerCode"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="分件数"
                      prop="gcentpks">
          <el-input v-model="good.gcentpks"
                    placeholder="请输入"
                    clearable
                    style="width:150px"></el-input>
        </el-form-item>
        <el-form-item label="分重量（吨）"
                      prop="gcentwg">
          <el-input v-model="good.gcentwg"
                    placeholder="请输入"
                    clearable
                    style="width:150px"></el-input>
        </el-form-item>
        <el-form-item label="分体积（立方米）"
                      prop="gcentvol">
          <el-input v-model="good.gcentvol"
                    placeholder="请输入"
                    clearable
                    style="width:150px"></el-input>
        </el-form-item>
        <el-form-item label="交付方式"
                      prop="planGoods.deliverymd">
          <el-select  clearable style="width: 150px" size="small"
                      v-model="good.planGoods.deliverymd" placeholder="请选择">
            <el-option :label="item.meaning" :value="item.lowValue" v-for="item,index in dataList.DELIVERYMD" :key="index"></el-option>
          </el-select>            
        </el-form-item>
        <el-form-item label="分货地"
                      prop="planGoods.deliveryPortcd">
            <el-select v-model="good.planGoods.deliveryPortcd"
                   placeholder="请选择"
                   clearable
                   filterable
                   style="width:150px">
              <el-option :label="item.portlocnnm"
                     :value="item.portcd"
                     v-for="item,index in dataList.ports"
                     :key="index"></el-option>
            </el-select>
        </el-form-item>
        <el-form-item label="危险品类别"
                      prop="planGoods.dtpDnggcd">
          <el-select  clearable style="width: 150px" size="small"
                    v-model="good.planGoods.dtpDnggcd" placeholder="请选择危险类代码">
            <el-option  :label="item.dnggnm" :value="item.dnggcd"   v-for="item,index in dataList.danger" :key="index"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="联合国代码"
                      prop="planGoods.unno">
           <el-select  clearable style="width: 150px" size="small"
                      v-model="good.planGoods.unno" placeholder="请选择联合国编号">
            <el-option  :label="item.unno" :value="item.unno"   v-for="item,index in dataList.union" :key="index"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="货类代码"
                      prop="planGoods.gtypecd">
          <el-select  clearable style="width: 150px" size="small"
                      v-model="good.planGoods.gtypecd" placeholder="请选择联货类代码">
            <el-option  :label="item.name" :value="item.type"   v-for="item,index in dataList.goodsType" :key="index"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="包装类型"
                      prop="planGoods.pktype">
          <el-select   clearable style="width: 150px" size="small"
                    v-model="good.planGoods.pktype" placeholder="请选择包装类型">
            <el-option  :label="item.meaning" :value="item.lowValue"  
            v-for="item,index in dataList.PACKAGE_TYPE" :key="index"></el-option>
          </el-select>
                    <!-- dataList.PACKAGE_TYPE -->
        </el-form-item>
        <el-form-item label="温度"
                      prop="planGoods.temperature">
          <el-input v-model="good.planGoods.temperature"
                    placeholder="请输入"
                    clearable
                    style="width:150px"></el-input>
        </el-form-item>
        <el-form-item label="温度单位"
                      prop="planGoods.tempUnit">
                      <el-select   clearable style="width: 150px" size="small"
                    v-model="good.planGoods.tempUnit" placeholder="请选择温度单位">
          <el-option  :label="item.meaning" :value="item.lowValue"  
          v-for="item,index in dataList.TMPT_UNIT" :key="index"></el-option>
        </el-select>
        </el-form-item>

      </el-form>
      <div class="btn">
        <el-button type="primary"
                   size="small"
                   style="background-color:#043AA7"
                   :loading="butLoading"
                   v-if="!seeFlag"
                   @click="addGood">新增</el-button>
        <el-button type="primary"
                   size="small"
                   v-if="!seeFlag"
                   style="background-color:#043AA7"
                   @click="saveGoods">保存</el-button>
      </div>
    </div>
    <div class="table">
      <div class="box-title">货列表</div>
      <el-table :data="goods"
                :header-cell-style="{ background: '#EEF1F5'}"
                style="width: 100%">

        <el-table-column prop="planGoods.billno"
                         label="提单号"
                         width="120">
        </el-table-column>
        <el-table-column prop="planGoods.vesselBookingNo"
                         label="订舱号"
                         width="120">
        </el-table-column>
        <el-table-column prop="planGoods.consigneeName"
                         label="货主"
                         width="200">
        </el-table-column>
        <el-table-column prop="planGoods.gname"
                         label="货名"
                         width="120">
        </el-table-column>
        <el-table-column prop="planGoods.shipper"
                         label="发货人"
                         width="120">
        </el-table-column>
        <el-table-column prop="planGoods.receiver"
                         label="收货人"
                         width="120">
        </el-table-column>
        <el-table-column prop="planGoods.gagentName"
                         label="货代"
                         width="200">
        </el-table-column>
        <el-table-column prop="gcentpks"
                         label="分件数"
                         width="120">
        </el-table-column>
        <el-table-column prop="gcentwg"
                         label="分重量（吨）"
                         width="120">
        </el-table-column>
        <el-table-column prop="gcentvol"
                         label="分体积（立方米）"
                         width="180">
        </el-table-column>
        <el-table-column prop="planGoods.deliverymdName"
                         label="交付方式"
                         width="120">
        </el-table-column>
        <el-table-column prop="planGoods.deliveryPortcdName"
                         label="分货地"
                         width="120">
        </el-table-column>
        <el-table-column prop="planGoods.dtpDnggcdName"
                         label="危险品类别"
                         width="120">
        </el-table-column>
        <el-table-column prop="planGoods.unno"
                         label="联合国代码"
                         width="120">
        </el-table-column>
        <el-table-column prop="planGoods.gtypecdName"
                         label="货类代码"
                         width="120">
        </el-table-column>
        <el-table-column prop="planGoods.pktypeName"
                         label="包装类型"
                         width="120">
        </el-table-column>
        <el-table-column prop="planGoods.temperature"
                         label="温度"
                         width="120">
        </el-table-column>
        <el-table-column prop="planGoods.tempUnitName"
                         label="温度单位"
                         width="120">
        </el-table-column>

        <el-table-column fixed="right"
                         label="操作"
                         width="120">
          <template slot-scope="scope">
            <el-button @click="del(scope.$index)"
                       type="text"
                       v-if="!seeFlag"
                       style="color: #FF3838">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
  </div>
</template>

<script>
export default {
  name: 'addGoods',
  props: {
    boxInfo: {},
    id: {},
    seeFlag:{
      default:false,
    }
  },
  components: {},
  data() {
    return {
      good: {
        planGoods:{

        }
      },
      goods: [],
      rules: {
        'planGoods.billno': [{ required: true, message: '请输入提单号', trigger: 'blur' }],
      },
      consigneeList: [],
      deliverymdList: [],
      type: '',
      butLoading: false,
      dataList:{},
    }
  },
  watch:{
    goods(){
      if(this.goods.length>0){
        this.setDate()
      }
      this.$forceUpdate()
    }
  },
  methods: {
    setDate(){
      this.goods.forEach((item,index)=>{
        if(item.planGoods.tempUnit){
          item.planGoods.tempUnitName = this.dataList.TMPT_UNIT.filter(item1 => item.planGoods.tempUnit === item1.lowValue)[0].meaning;
        }
      })
    },
    getGoodInfo(){
      this.$api.refCode({
        domain:'TMPT_UNIT'
      }).then(res=>{
        this.dataList.TMPT_UNIT=res.data.data
        this.$forceUpdate()
      }).catch()
    },
    addGood() {
      this.$refs.form.validate((valid) => {
        if (valid) {
          this.loadAndUploadCheck()
        }
      })
    },
    
    customerByType() {
      //港口
      this.$api.port().then((res) => {
          this.dataList.ports = res.data.data
          this.$forceUpdate()
      }).catch()
      //交付方式
      this.$api.refCode({
          domain:'DELIVERYMD'
        }).then(res=>{
          this.dataList.DELIVERYMD=res.data.data
          this.$forceUpdate()
        }).catch()
      //货主
      
      this.$api
        .customerByType({ tenantTypeName: '货主' })
        .then((res) => {
          this.dataList.hz = res.data.data
        })
        .catch((err) => {})
      this.$api.getGoodsType().then(res=>{
        this.dataList.goodsType=res.data
      }).catch()
      //联合国
      this.$api.getDangerUnionno().then(res=>{
        this.dataList.union=res.data
      }).catch()
        this.$api
        .customerByType({ tenantTypeName: '货代' })
        .then((res) => {
          this.dataList.hd = res.data.data
        })
        .catch((err) => {})
        //危险品
        this.$api.dangerCode().then(res=>{
          this.dataList.danger=res.data.data
          this.$forceUpdate()
        }).catch()
        //温度
        this.$api.refCode({
          domain:'TMPT_UNIT'
        }).then(res=>{
          this.dataList.TMPT_UNIT=res.data.data
          // console.log(222)
          this.setDate()
          this.$forceUpdate()
        }).catch()

        //包装
        this.$api.refCode({
          domain:'PACKAGE_TYPE'
        }).then(res=>{
          this.dataList.PACKAGE_TYPE=res.data.data
          this.$forceUpdate()
        }).catch()

    },
    refCode() {
      //条款
      this.$api
        .refCode({ domain: 'DELIVERYMD' })
        .then((res) => {
          this.deliverymdList = res.data.data
        })
        .catch((err) => {})
    },
    saveGoods() {
      this.$emit('addItem', JSON.parse(JSON.stringify(this.goods)))
      this.$message.success('保存成功')
      this.goods=[]
      this.good = {
        planGoods:{}
      }
      this.$refs.form.resetFields()
    },
    del(index) {
      this.$confirm('此操作将永久删除该数据, 是否继续?', '提示')
        .then(() => {
          this.goods.splice(index, 1)
        })
        .catch(() => {})
    },
    //校验
    loadAndUploadCheck() {
      // console.log(this.goods.length)
      if(undefined===this.goods.length){
        //console.log(this.goods)
        this.goods=[]
      }
      console.log(this.goods)
      /* 货主 */
      let consigneeName = this.dataList.hz.filter(item=>{return this.good.planGoods.consignee == item.customerCode})[0]?.name || ''
      this.$set(this.good.planGoods,'consigneeName',consigneeName||'')
      /* 货代 */
      let gagentName = this.dataList.hd.filter(item=>{return this.good.planGoods.gagent == item.customerCode})[0]?.name || ''
      this.$set(this.good.planGoods,'gagentName',gagentName||'')
      /* 交付方式 */
      let deliverymdName = this.dataList.DELIVERYMD.filter(item=>{return this.good.planGoods.deliverymd == item.lowValue})[0]?.meaning || ''
      this.$set(this.good.planGoods,'deliverymdName',deliverymdName||'')
      /* 分货地 */
      let deliveryPortcdName = this.dataList.ports.filter(item=>{return this.good.planGoods.deliveryPortcd == item.portcd})[0]?.portlocnnm || ''
      this.$set(this.good.planGoods,'deliveryPortcdName',deliveryPortcdName||'')
      /* 危险品类别 */
      let dtpDnggcdName = this.dataList.danger.filter(item=>{return this.good.planGoods.dtpDnggcd == item.dnggcd})[0]?.dnggnm || ''
      this.$set(this.good.planGoods,'dtpDnggcdName',dtpDnggcdName||'')
      /* 货类代码 */
      let gtypecdName = this.dataList.goodsType.filter(item=>{return this.good.planGoods.gtypecd == item.type})[0]?.name || ''
      this.$set(this.good.planGoods,'gtypecdName',gtypecdName||'')
      /* 包装类型 */
      let pktypeName = this.dataList.PACKAGE_TYPE.filter(item=>{return this.good.planGoods.pktype == item.lowValue})[0]?.meaning || ''
      this.$set(this.good.planGoods,'pktypeName',pktypeName || '')
      console.log(this.good,'=====---=====');
      this.goods.push(JSON.parse(JSON.stringify(this.good)))
      this.good = {
        planGoods:{}
      }
      this.$refs.form.resetFields()

    },
  },

  computed: {},

  mounted() {
    this.type = this.$route.name == 'unloadList' ? 'I' : 'E'
    this.customerByType()
    this.refCode()
  },
}
</script>
<style lang='scss' scoped>
.box-title {
  font-size: 18px;
  font-family: PingFangSC-Medium, PingFang SC;
  font-weight: 500;
  color: #333333;
  line-height: 16px;
  line-height: 20px;
  padding-left: 10px;
  border-left: 5px solid #4980d5;
  margin-bottom: 10px;
}
.btn {
  text-align: center;
  .el-button {
    width: 80px;
  }
}
</style>